<template>
	<div class="choice-shop">
		<div class="item-content flex" @click="showPopup">
			<el-input
				readonly
				:placeholder="placeholder"
				:value="currDeptName"
				:disabled="disabled"
			/>
			<i class="el-icon-caret-bottom icon" />
		</div>
		<van-popup v-model="visible" position="bottom" :style="{ height: '100%' }">
			<div class="popup flex-column">
				<van-nav-bar title="选择门店" left-arrow @click-left="closePopup" />
				<div class="search">
					<van-search
						v-model="keyword"
						placeholder="请输入会员微信号/手机号/姓名"
						shape="round"
						show-action
						@cancel="closePopup"
					/>
				</div>
				<div class="flex-1 popup-body" ref="container">
					<cl-empty v-if="list.length == 0" tips="暂无门店" />
					<ul class="list">
						<li
							class="flex flex-align-center list-item"
							v-for="(item, index) in list"
							:key="index"
							@click="itemClick(item, index)"
						>
							<cl-avatar
								class="cover"
								:size="44"
								shape="square"
								:src="item.log || require('@/assets/logo/logo.png')"
							/>
							<div style="flex:1;overflow: hidden;">
								<div class="ellipsis">
									{{ item.dept_name }}
								</div>
								<!-- <div class="s-ellipsis u-tips-color address">
                                 {{item.store_address}}
                             </div> -->
							</div>
						</li>
					</ul>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
import { Popup, NavBar, Search } from "vant";

export default {
	components: {
		VanPopup: Popup,
		VanNavBar: NavBar,
		VanSearch: Search
	},
	props: {
		placeholder: String,
		biz_id: [String, Number],
		value: [String, Number],
		disabled: {
			type: Boolean,
			default: false
		},
		// 只展示营业
		onlyOpen: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			visible: false,
			keyword: "",
			currVal: this.value
		};
	},
	computed: {
		bizRefData() {
			return this.getBizRefData(this.biz_id);
		},
		shopList() {
			const { shop_childs } = this.bizRefData;

			if (!this.onlyOpen) return shop_childs;
			return shop_childs.filter(v => v.bus_state == 1);
		},
		list() {
			if (!this.keyword) {
				return this.shopList;
			}
			return this.shopList.filter(v => v.dept_name.includes(this.keyword));
		},
		currDeptName() {
			const { currVal } = this;
			const { shop_childs } = this.bizRefData;
			if (currVal == null || currVal == undefined) return "";
			let curr = shop_childs.find(v => v.dept_id == currVal * 1);
			return curr?.dept_name ?? "";
		}
	},
	watch: {
		biz_id(v) {
			this.getShopList();
		},
		value(v) {
			this.currVal = v;
		}
	},
	created() {
		this.getShopList();
	},
	methods: {
		showPopup() {
			if (this.disabled) return;
			this.visible = true;
		},
		closePopup() {
			this.visible = false;
		},
		itemClick(item, index) {
			this.closePopup();
			this.currVal = item.dept_id;
			this.$emit("input", item.dept_id);
			this.$emit("confirm", item, index);
		},
		async getShopList() {
			await this.getBizRefShop(this.biz_id);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.van-nav-bar .van-icon {
		color: #333 !important;
	}
	.el-input.is-disabled .el-input__inner {
		background-color: transparent;
	}
}
.choice-shop {
	.item-content {
		align-items: center;
		padding-bottom: 0.1rem;
		border-bottom: 1px solid #dfdfdf;
		.icon {
			color: #999;
		}
	}
	.popup {
		height: 100%;
		overflow: hidden;
		.search {
			padding-right: 4px;
		}
		&-body {
			position: relative;
			overflow: auto;
			background: #fff;
			box-sizing: border-box;
			border-top: 1px solid #dfdfdf;

			.list-item {
				height: 60px;
				padding: 0 15px;
				border-bottom: 1px solid #dfdfdf;
				.cover {
					background: #f2f3f5;
					border-radius: 5px;
					overflow: hidden;
					margin-right: 10px;
				}
				.address {
					font-size: 12px;
					margin-top: 2px;
				}
			}
		}
	}
}
</style>
